﻿<!DOCTYPE html>
<html lang="en">
<head th:replace="~{parts/head}">

<!-- page wrapper -->
<body>

    <div class="boxed_wrapper">

        <!-- preloader -->
        <div class="preloader"></div>
        <!-- preloader -->


        <!-- main header -->
        <header class="main-header style-three">

            <!-- header-lower -->
            <div class="header-lower">
                <div class="outer-box clearfix">
                    <div class="left-column">
                        <div class="logo-box">
                            <figure class="logo"><a href="/"><img src="../../images/logo-3.png" alt=""></a></figure>
                        </div>
                        <div th:replace="~{parts/menu-area}">
                    </div>
                    <div class="right-column pull-right">
                        <div th:replace="~{parts/author-box}">
                    </div>
                </div>
            </div>

            <!--sticky Header-->
            <div class="sticky-header">
                <div class="auto-container">
                    <div class="outer-box">
                        <div class="logo-box">
                            <figure class="logo"><a href="/"><img src="../../images/small-logo.png" alt=""></a></figure>
                        </div>
                        <div class="menu-area">
                            <nav class="main-menu clearfix">
                                <!--Keep This Empty / Menu will come through Javascript-->
                            </nav>
                        </div>
<!--                        <div class="btn-box"><a href="register-page.html" class="theme-btn-one"><i class="icon-image"></i>Join Now</a></div>-->
                    </div>
                </div>
            </div>
        </header>
        <!-- main-header end -->

        <!-- Mobile Menu  -->
        <div class="mobile-menu">
            <div class="menu-backdrop"></div>
            <div class="close-btn"><i class="fas fa-times"></i></div>
            
            <nav class="menu-box">
                <div class="nav-logo"><a href="/"><img src="../../images/logo-2.png" alt="" title=""></a></div>
                <div class="menu-outer"><!--Here Menu Will Come Automatically Via Javascript / Same Menu as in Header--></div>
                <div class="contact-info">
                    <h4>Contact Info</h4>
                    <ul>
                        <li>Chicago 12, Melborne City, USA</li>
                        <li><a href="">+88 01682648101</a></li>
                        <li><a href="mailto:info@example.com">info@example.com</a></li>
                    </ul>
                </div>
                <div class="social-links">
                    <ul class="clearfix">
                        <li><a href="/"><span class="fab fa-twitter"></span></a></li>
                        <li><a href="/"><span class="fab fa-facebook-square"></span></a></li>
                        <li><a href="/"><span class="fab fa-pinterest-p"></span></a></li>
                        <li><a href="/"><span class="fab fa-instagram"></span></a></li>
                        <li><a href="/"><span class="fab fa-youtube"></span></a></li>
                    </ul>
                </div>
            </nav>
        </div><!-- End Mobile Menu -->


        <!--page-title-two-->
        <section class="page-title-two">
            <div class="title-box centred bg-color-2">
                <div class="pattern-layer">
                    <div class="pattern-1" style="background-image: url(../../images/shape/shape-70.png);"></div>
                    <div class="pattern-2" style="background-image: url(../../images/shape/shape-71.png);"></div>
                </div>
                <div class="auto-container">
                    <div class="title">
                        <h1>出诊管理</h1>
                    </div>
                </div>
            </div>
            <div class="lower-content">
                <ul class="bread-crumb clearfix">
                    <li><a href="/">主页</a></li>
                    <li><a style="cursor: pointer" onclick="window.history.back(-1);">上一页</a></li>
                    <li>出诊管理</li>
                </ul>
            </div>
        </section>
        <!--page-title-two end-->


        <!-- doctors-dashboard -->
        <section class="doctors-dashboard bg-color-3">
            <div class="left-panel">
                <div class="profile-box">
                    <div class="upper-box">
                        <figure class="profile-image"><img th:src="${user.icon}" alt=""></figure>
                        <div class="title-box centred">
                            <div class="inner">
                                <h3 th:text="${user.name}">Dr. Rex Allen</h3>
<!--                                <p>MDS - Periodontology</p>-->
                            </div>
                        </div>
                    </div>
                    <div class="profile-info">
                        <ul class="list clearfix">
                            <th:block th:replace="~{parts/admin-user-dash}"></th:block>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="right-panel">
                <div class="content-container">
                    <div class="outer-container">
                        <div class="schedule-timing">
                            <div class="title-box clearfix">
                                <div class="text pull-left">
                                    <h3>出诊信息</h3>
                                </div>
                                <!--                                <div class="right-column pull-right">-->
                                <!--                                    <span>Search Event</span>-->
                                <!--                                    <form action="schedule-timing.html" method="post" class="search-form">-->
                                <!--                                        <div class="form-group">-->
                                <!--                                            <input type="search" name="search-field" placeholder="Event title" required="">-->
                                <!--                                            <button type="submit"><i class="far fa-search"></i></button>-->
                                <!--                                        </div>-->
                                <!--                                    </form>-->
                                <!--                                </div>-->
                            </div>
                            <div class="inner-box">
                                <div class="inner">
                                    <div class="calendar-title clearfix">
                                        <div class="text pull-left">
                                            <h3>日程</h3>
                                        </div>
                                    </div>
                                    <div class="row" style="margin-left: 10px;">
                                        <div class="col-lg-6 col-md-6 col-sm-6">
                                            <label><strong>选择医生查看排班</strong></label>
                                            <select class="wide" id="docId" name="docId" onchange="getData()">
                                                <option th:each="item:${doctors}" th:text="${item.name}" th:value="${item.id}" th:selected="${doctor ne null and doctor.id eq item.id}"></option>
                                            </select>
                                        </div>
                                    </div>
                                    <div id="docData">
                                        <div th:fragment="docData">
                                            <div class="row" style="height: 100px;margin-top: 20px;">
                                                <div class="col-md-2 border text-center"></div>
                                                <th:block th:each="item,stat:${dateMap}">
                                                    <div class="col-md-2 border text-center" style="padding-top: 32px;font-size: 20px;"><strong th:text="${item.value[1]}">日期</strong></div>
                                                </th:block>
                                            </div>
                                            <div class="row" style="height: 100px;">
                                                <div class="col-md-2 border text-center" style="padding-top: 32px;font-size: 20px;"><strong>上午</strong></div>
                                                <th:block th:each="item,stat:${outcomeList0}">
                                                    <div class="col-md-2 border text-center" style="padding-top: 32px;font-size: 20px; cursor: pointer;" onclick="showState(this)">
                                                        <span style="display: none">0</span>
                                                        <span style="display: none" th:text="${dateMap.get(stat.index+1)[0]}"></span>
                                                        <span th:if="${item eq null or item ne null and item.state eq '0'}">休息</span>
                                                        <span th:if="${item ne null and item.state eq '1'}" class="work">出诊</span>
                                                        <span th:if="${item ne null and item.state eq '2'}" class="rest">请假</span>
                                                    </div>
                                                </th:block>
                                            </div>
                                            <div class="row" style="height: 100px;">
                                                <div class="col-md-2 border text-center" style="padding-top: 32px;font-size: 20px;"><strong>下午</strong></div>
                                                <th:block th:each="item,stat:${outcomeList1}">
                                                    <div class="col-md-2 border text-center" style="padding-top: 32px;font-size: 20px; cursor: pointer;" onclick="showState(this)">
                                                        <span style="display: none">1</span>
                                                        <span style="display: none" th:text="${dateMap.get(stat.index+1)[0]}"></span>
                                                        <span th:if="${item eq null or item ne null and item.state eq '0'}">休息</span>
                                                        <span th:if="${item ne null and item.state eq '1'}" class="work">出诊</span>
                                                        <span th:if="${item ne null and item.state eq '2'}" class="rest">请假</span>
                                                    </div>
                                                </th:block>
                                            </div>
                                            <div class="row" style="height: 100px;">
                                                <div class="col-md-2 border text-center" style="padding-top: 32px;font-size: 20px;"><strong>夜间</strong></div>
                                                <th:block th:each="item,stat:${outcomeList2}">
                                                    <div class="col-md-2 border text-center" style="padding-top: 32px;font-size: 20px; cursor: pointer;" onclick="showState(this)">
                                                        <span style="display: none">2</span>
                                                        <span style="display: none" th:text="${dateMap.get(stat.index+1)[0]}"></span>
                                                        <span th:if="${item eq null or item ne null and item.state eq '0'}">休息</span>
                                                        <span th:if="${item ne null and item.state eq '1'}" class="work">出诊</span>
                                                        <span th:if="${item ne null and item.state eq '2'}" class="rest">请假</span>
                                                    </div>
                                                </th:block>
                                            </div>
                                            <div class="row" style="height: 100px;">
                                                <div class="col-md-2 border text-center" style="padding-top: 32px;font-size: 20px;"><strong>昼夜</strong></div>
                                                <th:block th:each="item,stat:${outcomeList3}">
                                                    <div class="col-md-2 border text-center" style="padding-top: 32px;font-size: 20px; cursor: pointer;" onclick="showState(this)">
                                                        <span style="display: none">3</span>
                                                        <span style="display: none" th:text="${dateMap.get(stat.index+1)[0]}"></span>
                                                        <span th:if="${item eq null or item ne null and item.state eq '0'}">休息</span>
                                                        <span th:if="${item ne null and item.state eq '1'}" class="work">出诊</span>
                                                        <span th:if="${item ne null and item.state eq '2'}" class="rest">请假</span>
                                                    </div>
                                                </th:block>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- doctors-dashboard -->


        <!-- main-footer -->
        <div th:replace="~{parts/main-footer}"></div>
        <!-- main-footer end -->
        <div th:replace="~{parts/alert-modal}"></div>
        <!-- 模态框 -->
        <div class="modal fade" id="stateModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">更新当日状态</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <!-- 模态框主体 -->
                    <div class="modal-body">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend" style="height: 40px">
                                <label class="input-group-text" for="state">状态</label>
                            </div>
                            <select class="custom-select" id="state" style="height: 40px">
                                <option data-display='选择状态'>选择状态</option>
                                <option value="0">休息</option>
                                <option value="1">出诊</option>
                                <option value="2">请假</option>
                            </select>
                        </div>
                    </div>
                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="save()">确定</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 模态框 -->
        <div class="modal fade" id="saveSuccessModal1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">通知</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <!-- 模态框主体 -->
                    <div class="modal-body">
                        保存成功
                    </div>
                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <!--        <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>-->
                        <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="getData()">关闭</button>
                    </div>
                </div>
            </div>
        </div>
        <!--Scroll to top-->
        <button class="scroll-top scroll-to-target" data-target="html" onclick='location.href=("/message?targetId=6")'>
            <img src="../../images/robot-2.png">
        </button>
    </div>


    <script th:replace="~{parts/js}"></script>
    <script>
        $('#admin_tab').addClass("current");
        $('#admin-outcome').addClass("current");
        let stage = '';
        let date = '';
        function showState(item) {
            stage = $(item).find(':nth-child(1)').text();
            date = $(item).find(':nth-child(2)').text();
            $('#stateModal').modal('show');
        }

        function getData() {
            $.ajax({
                type: "get",
                url:"/outcome/getData",
                cache: false,
                data: {
                    docId: $('#docId').val()
                },
                success: function (data) {
                    $('#docData').html(data);
                },
                error: function(res) {
                    $('#handleFailModal').modal('show');
                }
            });
        }

        function save() {
            $.ajax({
                type: "post",
                url:"/outcome/save",
                cache: false,
                data: {
                    date: date,
                    docId: $('#docId').val(),
                    stage: stage,
                    state: $('#state').val(),
                },
                success: function (data) {
                    $('#saveSuccessModal1').modal('show');
                },
                error: function(res) {
                    $('#saveFailModal').modal('show');
                }
            });
        }
    </script>
    <style>
        .work{
            color: #39dc86
        }
        .rest{
            color: #fe5948
        }
        .nice-select {
            border: solid 1px #e8e8e8 !important;
        }
        .nice-select {
            height: 40px;
            padding: 0;
        }
        .nice-select:after {
            top: 5px;
        }
        .nice-select .current {
            margin-left: 10px;
        }
        .nice-select ul.list {
            width: 100%;
            height: 300px;
            overflow-y: scroll !important;
        }
    </style>
</body><!-- End of .page_wrapper -->
</html>
